<template>
  <div id="consult_leftTop" class="clearflx">
    <div class="left">
      <img src="../../assets/consult/a1.jpg" alt style="display:block;width:100%;" />
      <div class="left_content">
        <h3 class="title">最新更新</h3>
        <p class="content" v-for="(item,index) in data" :key="index">{{item.name}}</p>
      </div>
    </div>
    <div class="right">
      <div v-for="(item1,index1) in classify" :key="index1">
        <div class="classify">
          <span class="classify_title">{{item1.title}}</span>
          <router-link to class="more">更多>></router-link>
        </div>
        <div style="padding:14px 6px;">
          <p class="classify_content" v-for="(item11,index11) in item1.content" :key="index11">{{item11.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        { name: "世界绿博会华丽升级，推动全球绿色..." },
        { name: "科技精品美酒展城春糖会最新亮点..." },
        { name: "9月20日，汽车圈迎来首场在线分享会..." },
        { name: "全国第一个化工行业方面的污水综合..." },
        { name: "2014“节博会”与中国环保锅炉网达..." },
        { name: "第7届义乌机械工业展链接全球，引领..." },
        { name: "2018海上风电全球领袖峰会" },
        { name: "点金传媒承办第三届中国汽车服务产..." },
        { name: "2018“神羽争锋”全国十二省羽毛球..." },
        { name: "关于邀请参加：2018年中国国际检验..." },
        { name: "春糖最高端消费酒店展--你一格罗精品..." },
        { name: "2018中国国际纺织机械展20月20日..." },
        { name: "2020年欧洲德国国际专业加油站便..." },
        { name: "2018柳州机械装备展，工业装备展..." },
        { name: "2018第八届中国-东盟机床展暨智能..." }
      ],
      classify: [
        {
          title: "国内资讯",
          content: [
            { name: "中国国际毛织产品交易会致力引领产业发展潮流" },
            { name: "巴黎中国纺织品服装展助力民族品牌国际化" },
            { name: "B站写国创动画首次参展北美最大漫展NYCC" },
            { name: "中国纺织行业自主品牌推广活动在巴黎举办" },
            { name: "2018中国国际纺织机械展览会暨亚洲展览会" },
            { name: "柏林国际轨道交通技术展举办“中国馆日”活动" }
          ]
        },
        {
          title: "国外资讯",
          content: [
            {
              name: "【中非合作世界说】阿联酋媒体人：“八大行动”将深化中非合作"
            },
            { name: "海尔印度第二个新工业园举行签约仪式" },
            { name: "日企携手印尼利亚第一银行发展非洲跨境电商" },
            { name: "荷兰驻华公使：我们真正的兴趣在于改善贸易通道" },
            { name: "中国自主品牌组团出海传统文化工艺广受好评" },
            { name: "沙漠种出农作物  外媒：中国技术让阿联酋荒漠变绿洲" }
          ]
        },
        {
          title: "展会知识",
          content: [
            { name: "展会营销五点关键要素和准备工作" },
            { name: "国际展会沦为“大杂烩”续：展商无奈抱团追款" },
            { name: "会展专业就业形势不容乐观  行业人才流失严重" },
            { name: "抓住展会现场效益  合理提升公司知名度" },
            { name: "展会销售八大技巧帮您打造企业品牌" },
            { name: "五金展必备：参展前应做好哪些抓准备工作" }
          ]
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.left {
  width: 276px;
  padding-left: 24px;
  float: left;
  .left_content {
    text-align: left;
    .title {
      color: #c81622;
      border-bottom: 1px solid #848484;
      border-left: 3px solid #c81622;
      padding-left: 20px;
      line-height: 30px;
      margin-top: 26px;
      margin-bottom: 8px;
      font-weight: 400;
    }
    .content {
      height: 26px;
      line-height: 26px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      cursor: pointer;
      color: #000;
      padding-left: 6px;
    }
    .content:hover {
      text-decoration-line: underline;
      color: #c81622;
    }
  }
}
.right {
  float: right;
  width: 510px;
  text-align: left;
  .classify {
    height: 40px;
    .classify_title {
      display: inline-block;
      height: 100%;
      line-height: 40px;
      font-size: 18px;
      color: #fff;
      background-color: #c81622;
      padding: 0 16px;
      margin-right: 20px;
      position: relative;
    }
    .classify_title::after {
      position: absolute;
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid #c81622;
      border-right: 10px solid transparent;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      top: 50%;
      right: -20px;
      margin-top: -10px;
    }
    .more {
      color: #c81622;
      font-size: 14px;
    }
  }
  .classify_content {
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    cursor: pointer;
    color: #000;
  }
  .classify_content:hover {
    text-decoration-line: underline;
    color: #c81622;
  }
}
</style>